import React, { useState } from 'react';
import { Dropdown, Tabs, List, Button, Empty, Typography, Divider } from 'antd';
import { MessageOutlined, BellOutlined, CheckOutlined, DeleteOutlined } from '@ant-design/icons';
import styles from './index.less';

const { Text, Title } = Typography;

// 模拟数据
const mockUnreadMessages = [
    {
        id: 1,
        title: '系统维护通知',
        content: '系统将于今晚22:00-24:00进行维护升级',
        time: '5分钟前',
        type: 'system',
        read: false
    },
    {
        id: 2,
        title: '审批提醒',
        content: '您有3个待审批申请需要处理',
        time: '1小时前',
        type: 'approval',
        read: false
    },
    {
        id: 3,
        title: '安全预警',
        content: '检测到异常登录行为，请及时确认',
        time: '2小时前',
        type: 'security',
        read: false
    },
    {
        id: 4,
        title: '新功能发布',
        content: '数据导出功能已上线，欢迎体验',
        time: '3小时前',
        type: 'feature',
        read: false
    },
    {
        id: 5,
        title: '部门通知',
        content: '本周五下午3点部门例会，请准时参加',
        time: '5小时前',
        type: 'department',
        read: false
    }
];

const mockReadMessages = [
    {
        id: 6,
        title: '月度报告已生成',
        content: '您的工作月报已自动生成，请查看',
        time: '昨天',
        type: 'report',
        read: true
    },
    {
        id: 7,
        title: '密码修改成功',
        content: '您的登录密码已成功修改',
        time: '2天前',
        type: 'security',
        read: true
    },
    {
        id: 8,
        title: '任务完成提醒',
        content: '您分配的任务已按时完成',
        time: '3天前',
        type: 'task',
        read: true
    }
];

const NotificationDropdown = ({ children }) => {
    const [visible, setVisible] = useState(false);
    const [unreadMessages, setUnreadMessages] = useState(mockUnreadMessages);
    const [readMessages, setReadMessages] = useState(mockReadMessages);

    const handleVisibleChange = (flag) => {
        setVisible(flag);
    };

    const markAsRead = (messageId) => {
        const message = unreadMessages.find(msg => msg.id === messageId);
        if (message) {
            setUnreadMessages(unreadMessages.filter(msg => msg.id !== messageId));
            setReadMessages([{ ...message, read: true }, ...readMessages]);
        }
    };

    const markAllAsRead = () => {
        setReadMessages([...unreadMessages.map(msg => ({ ...msg, read: true })), ...readMessages]);
        setUnreadMessages([]);
    };

    const deleteMessage = (messageId, isUnread) => {
        if (isUnread) {
            setUnreadMessages(unreadMessages.filter(msg => msg.id !== messageId));
        } else {
            setReadMessages(readMessages.filter(msg => msg.id !== messageId));
        }
    };

    const getMessageIcon = (type) => {
        const iconMap = {
            system: <BellOutlined style={{ color: '#1890ff' }} />,
            approval: <CheckOutlined style={{ color: '#52c41a' }} />,
            security: <MessageOutlined style={{ color: '#ff4d4f' }} />,
            feature: <BellOutlined style={{ color: '#722ed1' }} />,
            department: <MessageOutlined style={{ color: '#faad14' }} />,
            report: <BellOutlined style={{ color: '#13c2c2' }} />,
            task: <CheckOutlined style={{ color: '#52c41a' }} />
        };
        return iconMap[type] || <MessageOutlined />;
    };

    const renderMessageItem = (item, isUnread = false) => (
        <List.Item
            key={item.id}
            className={styles.messageItem}
            actions={[
                <Button
                    type="text"
                    size="small"
                    icon={<DeleteOutlined />}
                    onClick={() => deleteMessage(item.id, isUnread)}
                    className={styles.deleteBtn}
                />
            ]}
        >
            <List.Item.Meta
                avatar={getMessageIcon(item.type)}
                title={
                    <div className={styles.messageTitle}>
                        <Text strong={!isUnread}>{item.title}</Text>
                        {isUnread && <span className={styles.unreadDot} />}
                    </div>
                }
                description={
                    <div>
                        <Text type="secondary">{item.content}</Text>
                        <br />
                        <Text type="secondary" className={styles.messageTime}>{item.time}</Text>
                    </div>
                }
            />
            {isUnread && (
                <Button
                    type="link"
                    size="small"
                    onClick={() => markAsRead(item.id)}
                    className={styles.markReadBtn}
                >
                    标为已读
                </Button>
            )}
        </List.Item>
    );

    const content = (
        <div className={styles.notificationDropdown}>
            <div className={styles.header}>
                <Title level={5}>消息通知</Title>
                {unreadMessages.length > 0 && (
                    <Button type="link" size="small" onClick={markAllAsRead}>
                        全部已读
                    </Button>
                )}
            </div>

            <Tabs
                centered
                defaultActiveKey="unread"
                size="small"
                items={[
                    {
                        key: 'unread',
                        label: `未读 (${unreadMessages.length})`,
                        children: (
                            <div className={styles.messageList}>
                                {unreadMessages.length > 0 ? (
                                    <>
                                        <List
                                            dataSource={unreadMessages}
                                            renderItem={item => renderMessageItem(item, true)}
                                            size="small"
                                        />
                                        <Divider />
                                        <div className={styles.moreBtn}>
                                            <Button type="link" block>查看更多未读消息</Button>
                                        </div>
                                    </>
                                ) : (
                                    <Empty
                                        description="暂无未读消息"
                                    />
                                )}
                            </div>
                        )
                    },
                    {
                        key: 'read',
                        label: `已读 (${readMessages.length})`,
                        children: (
                            <div className={styles.messageList}>
                                {readMessages.length > 0 ? (
                                    <>
                                        <List
                                            dataSource={readMessages}
                                            renderItem={item => renderMessageItem(item, false)}
                                            size="small"
                                        />
                                        <Divider />
                                        <div className={styles.moreBtn}>
                                            <Button type="link" block>查看更多已读消息</Button>
                                        </div>
                                    </>
                                ) : (
                                    <Empty
                                        description="暂无已读消息"
                                    />
                                )}
                            </div>
                        )
                    }
                ]}
            />
        </div>
    );

    return (
    <Dropdown
      popupRender={() => content}
      trigger={['click']}
      placement="bottomRight"
      open={visible}
      onOpenChange={handleVisibleChange}
      dropdownClassName={styles.notificationDropdownOverlay}
    >
      {children}
    </Dropdown>
  );
};

export default NotificationDropdown;